<template>
<div class="message">
  <div id="crumbs"style="">
    <img src="@/assets/icon/weizhi.png" alt="" class="ic"/>
    <router-link to="/admin">{{
        globalLanguage.languageSuffix == 'Cn' ? '首页' : 'Главная страница'
      }}&gt;
    </router-link>
    <router-link to="/admin/message">{{ globalLanguage.languageSuffix == 'Cn' ? '留言信息' : 'Сообщения' }}</router-link>
  </div>
  <h2 style="margin-bottom: 20px">留言信息</h2>
  <el-table :data="filtermessageList" style="width: 100%" ref="table" >
    <el-table-column prop="id" label="编号" width="100" align="center"></el-table-column>
    <el-table-column prop="username" label="姓名" width="150" align="center"></el-table-column>
    <el-table-column prop="phone" label="电话" width="200" align="center"></el-table-column>
    <el-table-column prop="content" label="内容"  width="300" align="center">
      <template #default="scope">
        <div class="message-content">{{ scope.row.content }}</div>
      </template>
    </el-table-column>
    <el-table-column prop="creatTime" label="留言时间"  width="200" align="center"></el-table-column>
    <el-table-column label="操作" width="auto" align="center">
      <template #header>
        <el-input v-model="search" size="small" placeholder="输入内容关键字搜索" />
      </template>
      <template  #default="scope">
        <el-button link @click="handleShow(scope.row)">查看</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="dialogTableVisible" title="Shipping address" width="500">
    <div style="font-size: 20px;line-height: 2;padding: 20px">
      <p>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：{{ dialogTableVisibleData.username }}</p>
      <p>电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话：{{ dialogTableVisibleData.phone }}</p>
      <p style="display: flex;">
        <span style="flex-shrink: 0;">留言内容：</span>
        <span v-html="dialogTableVisibleData.content" style="border: 1px dashed #ccc;padding: 5px;"></span>
      </p>
      <p>留言时间：{{ dialogTableVisibleData.creatTime }}</p>
    </div>
  </el-dialog>
  <el-pagination
      :page-size="pageIndex.size"
      :size="'large'"
      layout="total, prev, pager, next"
      :total="pageIndex.total"
      @current-change="handleCurrentChange"
      style="display: flex; justify-content: center;margin-top: 20px"
  />
</div>

</template>
<script setup>
import {computed, onMounted, ref} from "vue";
import {listComments} from "@/api/index.js";
const dialogTableVisible = ref(false)
const search = ref('')
const messageList = ref([
  { id: 1, username: '张三', phone: '123@qq.com', content: '你好，我是张三，请问有什么需要帮助吗？',creatTime:'2025-01-01 12:00:00' },
  { id: 3, username: '王五', phone: '789@qq.com', content: '你好，我是王五，请问有什么需要帮助吗？',creatTime:'2025-01-01 12:00:00' }
])
const table = ref(null)
const dialogTableVisibleData = ref({})
const pageIndex = ref({
  total: 0,
  size: 10,
  current: 1
})
onMounted(() => {
  getMessageList()
})
const pageInfo = ref({
  pageNo: 1,
  pageSize: 10
})
const filtermessageList = computed(() =>
    messageList.value.filter(
        (data) =>
            !search.value ||
            data.content.toLowerCase().includes(search.value.toLowerCase())
    )
)
const getMessageList =async () =>{
  const res = await listComments(pageInfo.value)
  if(res.code === 200){
    messageList.value = res.CommentsIPage.records
    // //处理留言内容只展示前15个字符，后面的用省略号代替
    // messageList.value.forEach(item => {
    //   if(item.content.length > 15){
    //     item.content = item.content.substring(0,15) + '...'
    //   }
    // })
    console.log(res.CommentsIPage.total)
    pageIndex.value.total = parseInt(res.CommentsIPage.total)
  }
}

const handleShow = (row) => {
  console.log(row)
  //打开dialog
  dialogTableVisible.value = true
  //重新获取留言内容的详细信息
  dialogTableVisibleData.value = row
}

const handleCurrentChange = (val) => {
  pageInfo.value.pageNo = val
  //重新加载数据
  getMessageList()
}
</script>
<style scoped>
.message{
  padding: 20px;
  margin: 20px;
}
.message-content{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
